<template>
	<view class="main">
		<Tabs @swiperChange="swiperChange" ref="tabs" keyName="name" @change="change" @scrolltolower="scrolltolower" :swiperCurrent="swiperCurrent"
		:list="tabsData"itemStyle="margin: 20rpx 0">
			<template slot="nav">
				<view class="top">
					<view class="font-24">钱包余额(元)</view>
					<view class="flex flex-ai-c flex-jc-sb">
						<view class="font-72 color-1">{{money}}</view>
						<view class="color-1 font-22 btn flex flex-ai-c flex-jc-c" @click="skip(`/pages/me/withdrawal`)">
							去提现
						</view>
					</view>
					<view class="color-2 font-20 pad-t-b-20" style="border-top: 2rpx solid #F1F1F1;margin-top: 58rpx;">受设备每日销售利润影响会有浮动 ｜ 到账时间会有延迟</view>
				</view>
			</template>
			<template :slot="swiperCurrent+'tabs'">
				<wallet-list @scrolltolower="scrolltolower" :list="list" :swiperCurrent="swiperCurrent"></wallet-list>		
			</template>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '@/components/tabs.vue'
	import walletList from './components/wallet_list.vue';
	import user from '@/api2/user.js';
	export default {
		components: {
			Tabs,
			walletList
		},
		data() {
			return {
				page: 1,
				loadStatus: '',
				list: [],
				swiperCurrent: 0,
				tabsData: [
					{
						name: '收入',
						value: 0
					},
					{
						name: '支出',
						value: 1
					}
				],
				money: 0
			}
		},
		onLoad() {
			this.getMoneyRecord()
			this.money = uni.getStorageSync('userInfo').money || 0.00
		},
		methods: {
			moreStatus(status) {
				this.loadStatus = status
			},
			scrolltolower() {
				if(this.loadStatus == 'nomore') return
				this.getMoneyRecord()
			},
			async getMoneyRecord(){
				uni.showLoading()
				this.moreStatus('loading')
				const res = await user.getMoneyRecord({
					type: this.swiperCurrent + 1,//1-收入 2-支出
					page_size: 10,
					page: this.page
				})
				uni.hideLoading()
				this.list = [...this.list, ...res.data]
				if (res.data.length < 10) return this.moreStatus('nomore')
				if (res.data.total <= 10) {
					this.loadStatus = 'nomore'
				} else {
					this.moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
				}
				if (res.data.length === 0) return false
				this.page += 1 // 当前页加1
			},
			skip(url) {
				uni.navigateTo({
					url: url
				})
			},
			resetting() {
				this.list = []
				this.page = 1
			},
			swiperChange(i){
				this.resetting()
				this.swiperCurrent = i
				this.getMoneyRecord()
			},
			change(i) {
				this.swiperCurrent = i
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.main{
		height: 100%;
		.btn{
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 1rpx solid #999999;
			
		}
		.font-72{
			font-size: 72rpx;
		}
		.color-1{
			color: #FCB527;
		}
		.color-2{
			color: #999999;
		}
		.top{
			padding: 57rpx 25rpx 0 25rpx;
			background: #fff;
		}
	}
</style>